<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Colortip - a jQuery Tooltip Plugin | Tutorialzine demo</title>

<link rel="stylesheet" type="text/css" href="colortips-styles.css" />
<link rel="stylesheet" type="text/css" href="/baseproject/css/plugin/colortip-1.0/colortip-1.0-jquery.css"/>

<script type="text/javascript" src="/baseproject/js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="/baseproject/js/plugin/colortip-1.0/colortip-1.0-jquery.js"></script>
<script type="text/javascript" src="colortips-script.js"></script>
</head>

<body>
<!-- 
使用描述说明：
   1、引入文件  colortip-1.0-jquery.js  colortip-1.0-jquery.css jquery-1.6.2.js
   
   2、对应的空间使用：<a href="http://tutorialzine.com/" title="White theme" class="white">
   注意title的内容就是提示信息，class就是提示的背景
   
   3、对相关的控件添加tip属性  $('[title]').colorTip({color:'yellow',timeout: 5000  可以不设置，这些都是默认值});
   
   4、适用场景：  鼠标移动上去后显示提示信息，效果比较好
   
   
   5、缺点：
        a、不能在哪里显示，需要有鼠标事件触发
        b、自动消失由程序控制，外界干预不了，                     以后有需要可以进行扩展处理

 -->
<div id="page">

	<h1>Colortip - a jQuery Tooltip Plugin</h1>
    
    <h2>Test it by hovering over the links below</h2>
    
	<h2 class="backToTz"><a href="http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/" class="blue" title="Read The Tutorial on Tzine">Back to Tutorialzine &raquo;</a></h2>
    
  <div>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget   nisi eu nunc dapibus vestibulum. Aenean id sem nibh, at lacinia diam.   Nunc dictum vulputate sodales. Quisque ante lorem, sodales non accumsan   et, lobortis ut lacus. Aenean vehicula gravida elit id facilisis. In   molestie varius risus, ut viverra nulla mollis non. Duis dictum turpis a   mi convallis eget laoreet metus laoreet. Sed mattis ligula a diam   varius <a href="http://tutorialzine.com/" title="The tooltips do not use any images">dignissim</a>. Sed non magna risus, at elementum nunc. Nullam sit   amet massa felis, eget varius purus. Quisque tellus augue, tempor nec   accumsan ac, luctus vel libero. Cras eu tristique quam. </p>
      <p> Donec pharetra aliquam aliquet. Nam <a href="http://tutorialzine.com/" title="The script replaces the title attributes of the links with fancy tooltips.">congue</a> congue condimentum.   Suspendisse potenti. Sed et ipsum augue. Nam eu lectus orci, sit amet   suscipit sem. Suspendisse iaculis, orci vel ultricies tristique, sapien   lacus adipiscing dolor, condimentum fermentum magna erat eget elit.   Praesent pellentesque odio et sapien accumsan posuere. Vivamus ut mauris   lorem, sit amet ullamcorper nulla. Maecenas augue enim, sollicitudin   pretium ultrices et, hendrerit interdum enim. Etiam at urna vitae lectus   tincidunt rhoncus. Aliquam a dolor quis sapien viverra <a href="http://tutorialzine.com/" title="6 different color themes are available" class="green">ultricies</a> eget a   metus. Curabitur non enim risus. Phasellus nec massa non justo vehicula   consequat. Nulla vulputate enim vel turpis porttitor in sagittis erat   vehicula. Fusce urna odio, dictum quis dapibus vitae, luctus gravida   augue. </p>
      <p> Integer commodo lectus id risus semper ut interdum quam condimentum.   Pellentesque a sapien risus. Sed in arcu at nisl volutpat scelerisque   sed id diam. Nam eget lorem quis nibh faucibus euismod. Sed eget velit   vel orci iaculis vestibulum sed quis nisi. Donec cursus tincidunt   dapibus. Curabitur ac mauris vitae urna posuere elementum. Cras feugiat   <a href="http://tutorialzine.com/" title="You can specify a color theme by adding a simple class name" class="black">ornare</a> ultricies. Quisque quis est mauris, sed dapibus ipsum. Cras neque   ante, sodales pharetra egestas in, commodo vehicula ligula. Curabitur   turpis quam, interdum nec placerat in, malesuada sit amet ante. Fusce   tempor facilisis est, vitae varius justo scelerisque eu. Nulla sed ante   ipsum, id ultricies massa. Nunc sollicitudin, tortor sed mattis   consectetur, sem dolor consequat dui, <a href="http://tutorialzine.com/" title="The script would work on any kind of element, not just links.">consectetur</a> sodales elit lorem vel   neque. Etiam ut leo sed nunc sagittis malesuada sit amet porta metus.   Praesent faucibus lorem sit amet mauris egestas molestie. Duis vel nunc   sed tortor vulputate faucibus. </p>
      <p> Mauris <a href="http://tutorialzine.com/" title="White theme" class="white">ultricies</a> nulla eget lacus commodo lacinia vulputate est   elementum. Vestibulum vulputate, lectus eget posuere interdum, tellus   est mattis odio, sed vehicula augue enim sit amet metus. Phasellus justo   est, commodo sit amet facilisis quis, sodales ac ante. Pellentesque   commodo, massa a sagittis vulputate, elit metus rhoncus risus, at dictum   purus magna ac eros. Etiam a augue at mauris fermentum sollicitudin.   Donec sed lacus velit. Cras pellentesque ornare diam, in lacinia enim   tincidunt ac. Etiam sodales aliquet sem, vel vulputate risus dapibus in.   Nulla hendrerit congue diam a placerat. Nulla orci ligula, convallis   nec adipiscing iaculis, accumsan a purus. Praesent eleifend mauris eu   quam commodo pretium. Pellentesque congue <a href="http://tutorialzine.com/" class="red" title="A red tooltip">tincidunt</a> imperdiet. Vivamus   felis nunc, mollis eu tincidunt iaculis, <a href="http://tutorialzine.com/" title="Visit Website">condimentum</a> vitae risus. Nulla   eget risus nisl, lobortis mollis tellus. Quisque tempor gravida elit,   vel rhoncus odio condimentum iaculis. Praesent rhoncus pharetra est vel   fringilla. Proin a tortor quis quam viverra accumsan. Phasellus pulvinar   ornare pharetra. </p>
      <p> Phasellus vitae lobortis elit. Nunc gravida ultrices elit elementum   ultricies. Curabitur sed enim ac nibh tempus viverra ut <a href="http://tutorialzine.com/" title="Visit Website" class="blue">sodales</a> leo.   Integer a orci eget urna scelerisque tincidunt. Proin nibh ante, egestas   et porta ac, tempus quis diam. Pellentesque sagittis posuere erat et   posuere. Sed facilisis risus purus. Integer aliquam condimentum enim,   sit amet tincidunt metus ultrices sit amet. Nulla at purus non lorem   varius tincidunt at ut nunc. Aenean tellus urna, faucibus faucibus   pharetra a, laoreet ac enim. <a href="http://tutorialzine.com/" title="Visit Website">Quisque</a> ac lobortis nisi. Curabitur ipsum   tellus, pretium nec mollis et, iaculis id magna. Donec et elit nisl.   Etiam aliquam molestie tincidunt. Maecenas rhoncus eros a velit   tristique blandit. Morbi molestie pulvinar neque nec scelerisque.   Pellentesque nec hendrerit libero. </p>
  </div>
</div>



</body>
</html>
